<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <html lang="en" xmlns:th="http://www.thymeleaf.org">

    </html>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
    <title id="title-meta">安捷能源</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/jilin.css}">
    <link rel="stylesheet" th:href="@{/css/keyboard.css}">
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">
    <style>
        input {
            background: none;
            outline: none;
            border: 1px solid #ccc;
        }

        input:focus {
            border: 1px solid #2DB55B;
        }

        [v-cloak] {
            display: none;
        }

        .tabs {
            width: 100%;
            max-width: 1000px;
            margin: 10px auto;
        }

        .tabs>input {
            opacity: 0;
        }

        .tabs>label {
            cursor: pointer;
            background: #073598;
            color: #eee;
            border-radius: 20px 20px 20px 20px;
            padding: 1% 2%;
            float: left;
            margin-right: 2px;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
            text-align: center;
            z-index: 99;
        }

        .tabs>label:hover {
            background: #073598;
            color: #fff;
        }

        .tabs>input:checked+label {
            background: #056caa;
            ;
            color: #fff;
            margin-left: 0px;
        }

        .tabs input:nth-of-type(1):checked~.panels .panel:first-child,
        .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2) {
            opacity: 1;
            -webkit-transition: .3s;
        }

        .panels {
            float: left;
            /*clear: both;*/
            position: relative;
            width: 100%;
            border-radius: 0 10px 10px 10px;
            min-height: 650px;
            margin-top: -50px;
        }

        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            border-radius: 0 10px 10px 10px;
            box-sizing: border-box;
            height: 650px;
            margin-top: -50px;
            /*border:1px solid red;*/
            padding: 0px;
        }

        .gongkuang>div {
            width: 100%;
            margin-left: 0px;
            margin-top: 1.8vh;
        }

        .gongkuang>div>div {
            width: 90%;
            margin-left: 0px;
        }

        .gongkuang>div>img {
            margin-right: 0px;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="app" id="app" v-cloak>
        <div class="left-items">
            <div class="left-top">
                <div class="middle_left">
                    <div class="middle_left_tittle margin_top_big_botton">
                        <div>影响因素</div>
                    </div>
                    <div class="factor">
                        <div class="form_content">
                            <div>温度</div>
                            <div>{{temperature.min_temperature}}</div>
                            <div>~</div>
                            <div>{{temperature.max_temperature}}</div>
                            <div>℃</div>
                            <div>
                                <img th:src="@{/img2/tem.png}" alt="">
                            </div>
                        </div>

                        <div class="form_content" style="margin-left: 1.8vw;">
                            <div>天气</div>
                            <div>{{weather}}</div>
                            <div> </div>
                            <div>
                                <img th:src="@{/img2/tianqi.png}" alt="">
                            </div>
                        </div>

                        <div class="form_content">
                            <div>湿度</div>
                            <div>{{humidity.min_humidity}}</div>
                            <div>~</div>
                            <div>{{humidity.max_humidity}}</div>
                            <div>%</div>
                            <div>
                                <img th:src="@{/img2/humidity.png}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle-right">
                    <div class="middle_left_tittle margin_top_big_botton">
                        <div>知识图谱图</div>
                    </div>
                    <div class="select-panles">
                        <div class="select-panle">
                            <div class="select-panle-item-font select-panle-item-font-selected" id="season">供冷季</div>
                            <div style="width: 10vw; max-width: 135px;">
                                <select v-model="selected" name="signId" lay-verify="required" id="signId"
                                    style="background-color: #073598; color: #fff; height: 22px; width: 10vw; max-width:135px;min-width: 102px;font-size:0.4rem"
                                    @change="switchMode">
                                    <option value="1001">经济优先模式</option>
                                    <option value="1002">节能绿色优先模式</option>
                                    <option value="1003">舒适度优先模式</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle_m">
                <div class="middle_left_tittle">
                    <div>能量预测图</div>
                </div>
                <div id="hotChart" style="width: 100%;height: 26vh;margin:15px 0;"></div>
                <div id="eleChart" style="width:100%;height: 26vh;margin:15px 0;"></div>
            </div>
        </div>
        <div class="right-items">
            <div class="right-up">
                <!--        知识图谱开始-->
                <div style="position: relative; width: 100%;height: 100%;" id="knowChart">
                    <div id="loadingDiv" style="position: absolute;top:50%;left:50%">
                        <img style="width: 30px;height: 30px;" th:src="@{/img2/loadding.gif}" alt="">
                    </div>
                </div>
                <!--        知识图谱结束-->
            </div>
            <div class="bottom_right">
                <div class="bottom_right_top" style="width: 100%">
                    <div class="middle_left_tittle">
                        <div>策略建议</div>
                    </div>
                    <div class="gongkuang">
                    </div>
                </div>
            </div>
        </div>

        <!--        校验对话框-->
        <div class="login" v-show="isShow">
            <div class="login-title">校验权限</div>
            <div class="login-control">
                <div class="input-div">
                    <input type="text" v-model="username" placeholder="用户名" class="input-style">
                </div>
                <div class="input-div">
                    <input type="password" v-model="password" placeholder="密码" class="input-style">
                </div>
                <div class="handle">
                    <div class="login-btn" v-on:click="login">校验</div>
                    <div class="cancel" v-on:click="reset">取消校验</div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>

    <script th:src="@{/js/detect-element-resize.js}"></script>
    <script th:src="@{/js/iframe-resize.js}"></script>
    <script>
        let getNumParam = val => { return isNumber(val) ? val : "" }
        let BASE_URL = ""
        function reDraw(id, option) {
            let elem = document.getElementById(id)
            elem.removeAttribute("_echarts_instance_");
            let mychart = echarts.init(document.getElementById(id));
            mychart.setOption(option, true);
        }

        var eleChart = echarts.init(document.getElementById('eleChart')); //电量图
        var hotChart = echarts.init(document.getElementById('hotChart')); //能量图
        var mychart = echarts.init(document.getElementById("knowChart")); //知识图谱
        function drawEleChart(graphId, stgyType) { //电量，冷热量折线图
            $.ajax({
                type: "GET",
                url: "/multipower/strategyJL/predict_data/" + graphId + "?date=" + getNumParam(getPathParamAferSlashLast()) + "&&stgyType=" + stgyType,
                dataType: "json",
                async: true,
                success: function (data) {
                    if (eleChart != null && eleChart != "" && eleChart != undefined) {
                        eleChart.dispose();
                    }
                    if (hotChart != null && hotChart != "" && hotChart != undefined) {
                        hotChart.dispose();
                    }
                    console.log(data.electricity);
                    console.log(data.power);
                    var arrEle = data.electricity;
                    var arrHot = data.power;
                    var sumEle = 0;
                    var sumHot = 0;
                    for (var j = 0; j < arrHot.length; j++) {
                        sumHot = sumHot + Number(arrHot[j]); //计算总能量
                    }
                    for (var i = 0; i < arrEle.length; i++) {
                        sumEle = sumEle + Number(arrEle[i]); //计算总电量
                    }
                    option2.title.subtext = "今日能量:" + Number(sumHot).toFixed(0) + "kWh";
                    hotChart = echarts.init(document.getElementById('hotChart'));
                    option2.series[0].data = arrHot;
                    hotChart.setOption(option2);
                    option1.title.subtext = "今日电度:" + Number(sumEle).toFixed(0) + "kWh";
                    eleChart = echarts.init(document.getElementById('eleChart'));
                    option1.series[0].data = arrEle;
                    eleChart.setOption(option1);
                },
                error: function (data) {
                    console.log(data)
                }
            })
        }

        function getNodeAndLine(mode) {
            $.ajax({
                type: "GET",
                url: "/multipower/strategyJL/getViewAtlas?date=" + getNumParam(getPathParamAferSlashLast()),
                dataType: "json",
                async: false,
                success: function (data) {
                    var node = data.node;
                    var edge = data.edge;
                    var nodeLength = data.node.length; // 节点的长度
                    var edgeLength = data.edge.length; // 边的长度
                    var nodeObject = { //节点对象
                        "name": "设备",
                        desc: "8", //描述，对应节点的id
                        "value": [200, 80], //节点的坐标
                        symbolSize: [60, 80],
                        selected: true,
                        // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                        // symbol:'none'
                        symbol: 'circle',
                        itemStyle: {
                            color: '#fff'
                        }
                    };
                    line_direction_option.series[0].data = node.map(function (item, index) {
                        return {
                            name: item.deviceName, //设备名称
                            desc: item.deviceId.toString(), // 设备id
                            value: item.coordinate, //设备坐标
                            symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath, //设备图片
                            symbolSize: [48, 48], //节点的大小
                            selected: true,
                            itemStyle: {
                                color: '#fff'
                            }
                        }
                    })
                    line_direction_option.series[1].data = edge.map(function (item) {
                        return {
                            name: "", //边标签上显示的文字
                            coords: item.line, //边的坐标
                            desc: item.desc, //边的描述，例如:3#10,3为起始节点id，10为终止节点id
                            effect: {
                                show: false,
                                trailLength: 0,
                                symbolSize: [30, 30],
                                //symbol: 'none'
                                symbol: 'none'
                                //symbol: 'image://' + item.energyPic
                            },
                        }
                    })
                    $.ajax({
                        type: "GET",
                        url: "/multipower/strategy/gen/" + mode + "?date=" + getNumParam(getPathParamAferSlashLast()),
                        dataType: "json",
                        async: true,
                        beforeSend: function () {
                            // $.blockUI();//请求之前打开
                            $.blockUI({
                                message: '<h1>请等待...</h1>'
                            });
                        },
                        success: function (data) {
                            $.unblockUI(); //返回关闭
                            var edgeHigh1 = data.path; //高亮边
                            console.log('edgeHigh1' + edgeHigh1)
                            var path2 = 'image://img/littlesun.png';
                            if (data.error == undefined && data.node && data.path && data.strategyOutput) { //运行成功
                                var nodeHigh = []; //保存高亮节点数组
                                var edgeHigh = []; //保存高亮边数组
                                var nodeHigh1 = data.node;
                                var arr = data.strategyOutput; //工况数组
                                //动态生成工况开始
                                var gongkuang1 = document.getElementsByClassName("gongkuang")[0];
                                gongkuang1.innerHTML = '';
                                for (var i = 0; i < arr.length; i++) { //动态表里工况数组，成功工况
                                    var newdiv = document.createElement("div");
                                    var newimg = document.createElement("img");
                                    newimg.setAttribute("src", "/multipower/img2/computer.png");
                                    newdiv.appendChild(newimg);
                                    var newdiv1 = document.createElement("div");
                                    var newspan = document.createElement("span");
                                    time_str = "(" + arr[i].infoTime + " )"
                                    recomment = arr[i].infoContent
                                    space = "&emsp;&emsp;&nbsp";
                                    newspan.innerHTML = space + time_str + space + recomment;
                                    newdiv.appendChild(newspan);
                                    newdiv.appendChild(newdiv1);
                                    var gongkuang = document.getElementsByClassName("gongkuang")[0];
                                    gongkuang.appendChild(newdiv);
                                    // console.log(arr[i]);
                                }
                                //遍历节点对象，将对象转为数组。
                                for (var index1 = 0; index1 < nodeHigh1.length; index1++) {
                                    nodeHigh.push(nodeHigh1[index1]);
                                }
                                //遍历边对象，将对象转为数组。
                                for (var index2 = 0; index2 < edgeHigh1.length; index2++) {
                                    edgeHigh.push(edgeHigh1[index2]);
                                }
                                for (var i = 0; i < nodeLength; i++) { //节点高亮
                                    for (var j = 0; j < nodeHigh.length; j++) {
                                        console.log(node[i].deviceId);
                                        if (nodeHigh[j] == node[i].deviceId) {
                                            //如果id相同则通过id查询高亮图片，高亮。
                                            $.ajax({
                                                type: "GET",
                                                url: BASE_URL + "/multipower/strategyJL/getHighlightPic/" + node[i].deviceId,
                                                dataType: "json",
                                                async: false,
                                                success: function (data) {
                                                    line_direction_option.series[0].data[i].symbol = "image://" + data.highlight;
                                                }
                                            })
                                        }
                                    }
                                }
                                for (var i = 0; i < edgeLength; i++) { //边高亮
                                    for (var j = 0; j < edgeHigh.length; j++) {
                                        if (edgeHigh[j] == edge[i].desc) { //如果关系名称相同则边高亮。
                                            line_direction_option.series[1].data[i].effect.symbol = "image://" + edge[i].energyPic;
                                        }
                                    }
                                }
                                $("#loadingDiv").parent().remove();

                                // let elem = document.getElementById("knowChart")
                                // elem.removeAttribute("_echarts_instance_");
                                // let mychart = echarts.init(document.getElementById("knowChart"));
                                reDraw("knowChart", line_direction_option)
                                //mychart.setOption(line_direction_option,true);

                            }
                            else {
                                $.unblockUI(); //返回关闭
                                reDraw("knowChart", line_direction_option)
                                console.log("图谱数据", line_direction_option)
                                //mychart.setOption(line_direction_option);
                                layer.alert('当前没有策略!', {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        error: function (data) {
                            $.unblockUI(); //返回关闭
                            reDraw("knowChart", line_direction_option)
                            //mychart.setOption(line_direction_option);
                            layer.alert('策略生成异常，请稍后再试！', {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                }
            })
        }
        //知识图谱对象配置
        var line_direction_option = {
            title: { //标题
                // text: '夏季能源知识图谱',
                left: '-5',
                top: '10px',
                textStyle: {
                    color: '#ffffff',
                    fontFamily: '微软雅黑',
                    fontWeight: 'lighter',
                    fontSize: 18
                },
            },
            xAxis: { //X轴的设置
                type: 'value',
                boundaryGap: false,
                show: false
            },
            yAxis: { //Y轴的设置
                type: 'value',
                show: false,
                inverse: true,
            },
            series: [{ //节点
                type: 'graph',
                layout: 'none',
                // silent: true,          //不响应鼠标事件
                coordinateSystem: 'cartesian2d',
                symbolSize: '8',
                showEffectOn: 'render',
                zlevel: 2,
                rippleEffect: {
                    period: 3, //波纹秒数
                    brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                    scale: 10 //波纹范围
                },
                hoverAnimation: true,

                label: {
                    normal: {
                        show: true,
                        position: 'bottom', //设置label显示的位置
                        // formatter: '{c}',//设置label读取的值为value
                        textStyle: {
                            fontSize: '18'
                        },
                    }
                },
                data: []
            },

            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 18,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',

                        width: 3,
                        opacity: 0.5,
                        curveness: 0,

                    }
                },
                effect: {
                    show: true,
                    // smoo false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
            ],

        }
        var option1 = {

            title: {
                text: '小时电度预测',
                subtext: "明日电量",
                subtextStyle: {
                    color: "#fff",
                    fontSize: 18
                },
                x: '80',
                padding: [0, 0, 0, 40],
                textStyle: {
                    color: "#fff",
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['电度'],
                textStyle: {
                    //标题颜色
                    color: "#fff"
                },
            },
            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },

            // //工具框，可以选择
            // toolbox: {
            //     feature: {
            //         saveAsImage: {} //下载工具
            //     }
            // },

            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#fff'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#fff'
                    }
                },
            },

            series: [{
                name: '电度',
                data: [],
                // [820, 932, 301, 1434, 1290, 1330, 1320,
                // 810,900,700,1000,1200,1700,
                // 1200,900,1300,1400,1500,800,950,
                // 890, 1000, 301,500 ],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },

            ],

            color: ['#eeb151']
        };
        var option2 = {

            title: {
                text: '小时能量预测',
                subtext: "明日能量",
                subtextStyle: {
                    color: "#fff",
                    fontSize: "18"
                },
                x: '80',
                padding: [0, 0, 0, 40],
                textStyle: {
                    color: "#fff",
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['能量'],
                textStyle: {
                    //标题颜色
                    color: "#fff"
                },
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },

            // //工具框，可以选择
            // toolbox: {
            //     feature: {
            //         saveAsImage: {} //下载工具
            //     }
            // },

            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#fff'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#fff'
                    }
                },
            },

            series: [{
                name: '能量',
                data: [],
                // [820, 932, 301, 1434, 1290, 1330, 1320,
                // 810,900,700,1000,1200,1700,
                // 1200,900,1300,1400,1500,800,950,
                // 890, 1000, 301,500 ],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },

            ],

            color: ['#ea7a80']
        };
        window.addEventListener("resize", function () {
            var eleChart = echarts.init(document.getElementById('eleChart')); //电量图
            var hotChart = echarts.init(document.getElementById('hotChart')); //能量图
            var mychart = echarts.init(document.getElementById("knowChart")); //知识图谱
            mychart.resize();
            eleChart.resize();
            hotChart.resize();
        });
    </script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                temperature: {
                    min_temperature: 26,
                    max_temperature: 34
                },
                humidity: {
                    min_humidity: 23,
                    max_humidity: 68
                },
                weather: '晴',
                isShow: false,
                username: "",
                password: "",
                selected: "1001",
                preselected: "1001",
                current_mode: "1001",
                graphId: "",
                BASE_URL: ""
            },
            created() {
                that = this
                $.ajax({
                    type: "GET",
                    url: BASE_URL + "/multipower/strategyJL/getDayWeather?date=" + getNumParam(getPathParamAferSlashLast()),
                    dataType: "json",
                    async: true,
                    beforeSend: function () {
                        $.blockUI({
                            message: '<h1>请等待...</h1>'
                        });
                    },
                    success: function (data) {
                        $.unblockUI();
                        if (data.dayWeather != undefined && data.humidityHigh != undefined && data.humidityLow != undefined) {
                            that.temperature.min_temperature = data.dayWeather.templow
                            that.temperature.max_temperature = data.dayWeather.temphigh
                            that.humidity.max_humidity = data.humidityHigh
                            that.humidity.min_humidity = data.humidityLow
                            that.weather = data.dayWeather.des
                        } else {
                            $.unblockUI();
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "错误"
                            });
                        }
                    }
                
                })
                // that.isShow = true

                $(function () {
                    $.ajax({
                        type: "GET",
                        url: BASE_URL + "/multipower/title/get/name",
                        dataType: "json",
                        async: true,
                        beforeSend: function () {
                            $.blockUI({
                                message: '<h1>请等待...</h1>'
                            });
                        },
                        success: function (data) {
                            $.unblockUI();
                            if (data.error == undefined) {
                                $("#title-meta").html(data.title+"大楼")
                            }
                        }
                    });

                    $.ajax({
                        type: "GET",
                        url: BASE_URL + "/multipower/strategyJL/getViewAtlas?date=" + getNumParam(getPathParamAferSlashLast()),
                        dataType: "json",
                        async: true,
                        beforeSend: function () {
                            $.blockUI({
                                message: '<h1>请等待...</h1>'
                            });
                        },
                        success: function (data) {
                            $.unblockUI();
                            that.graphId = data.graphId
                            var season = "供冷季"
                            if (data.season != undefined && data.season != null) {
                                if (data.season == 2) {
                                    season = "过渡季"
                                } else if (data.season == 3) {
                                    season = "供热季"
                                } else {
                                    season = "供冷季"
                                }
                            }
                            $("#season").html(season)
                            that.getModeData()
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $.unblockUI();
                            console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                        }
                    })
                })
            },
            methods: {
                login: function () {
                    that = this
                    
                    //20210401
                    var url = "";
                    //get结果赋值给变量
                    // 获取配置文件url地址
		            $.ajax({
		                type: "GET",
		                url: "/multipower/url/get/name",
		                dataType: "json",
		                //注意要异步实现
		                async: false,
		                success: function (data) {
		                    if (data.error == undefined) {
		                        url = data.url
		                    }
		                }
		            });
		            
                    $.ajax({
                        type: "POST",
                        /* url: "http://139.210.5.22:10103/permissions/controlPermission", */
                        // 吉林内网使用
                        /* url: "http://192.168.10.11:8080/permissions/controlPermission", */
                        // url: BASE_URL + "/multipower/manager/checkManager",
                        //传递变量url
                        url: url,
                        dataType: "json",
                        data: {
                            "username": this.username,
                            "password": this.password
                        },
                        async: true,
                        success: function (data) {
                            // 如果权限校验通过：允许改变模式，并且保存模式
                            if (data.errorCode == null) {
                                layer.alert("权限验证通过!", {
                                    icon: 1,
                                    title: "提示"
                                });
                                that.changeModeData()

                                that.isShow = false;
                            } else {
                                // 如果权限校验失败：提示，不保存模式
                                layer.alert(data.errorCode.rtnString, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        }
                    })
                },
                reset: function () {
                    // 点击取消校验时，将选择的模式改回旧模式
                    this.selected = this.preselected

                    this.isShow = false
                },
                switchMode: function () {
                    if (this.selected != this.preselected) {
                        this.username = ''
                        this.password = ''
                        this.isShow = true
                    }
                },
                getModeData: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: BASE_URL + "/multipower/strategyJL/viewLastestMultiMode",
                        dataType: "json",
                        data: {
                            "graphId": that.graphId,
                            "remark": "1"
                        },
                        async: true,
                        success: function (data) {
                            console.log("success")
                            if (data.multimode == null) {
                                that.graphId = that.graphId
                                that.selected = '1001'
                                that.preselected = '1001'
                                that.current_mode = '1001'
                            } else {
                                that.graphId = data.multimode.graphId
                                that.selected = data.multimode.strategyType
                                that.preselected = data.multimode.strategyType
                                that.current_mode = data.multimode.strategyType
                            }
                            getNodeAndLine(that.current_mode)
                            drawEleChart(that.graphId, that.current_mode)
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                        }
                    })
                },
                changeModeData: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: BASE_URL + "/multipower/strategyJL/saveMultiMode",
                        dataType: "json",
                        data: {
                            "graphId": that.graphId,
                            "remark": "1",
                            "strategyType": that.selected
                        },
                        async: true,
                        success: function (data) {
                            // 成功之后调用getModeData
                            that.getModeData()
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                        }
                    })
                }
            }
        });
    </script>

</body>

</html>